導航設(she)計千變(bian)萬化(hua)，但是能夠同時兼顧到(dao)可用(yong)(yong)性(xing)、易用(yong)(yong)性(xing)還能夠帶來足(zu)夠舒(shu)適體驗的(de)(de)導航模式，就不是那么多了。可靠的(de)(de)導航設(she)計需要(yao)幫助用(yong)(yong)戶(hu)達(da)成目(mu)標(biao)，找(zhao)到(dao)內容(rong)，提升頁面的(de)(de)轉(zhuan)化(hua)率。設(she)計不合(he)理的(de)(de)導航對(dui)于(yu)用(yong)(yong)戶(hu)體驗是災(zai)難性(xing)的(de)(de)，最直接的(de)(de)影響(xiang)，是用(yong)(yong)戶(hu)不再(zai)能足(zu)夠快捷方便(bian)的(de)(de)找(zhao)到(dao)想(xiang)要(yao)的(de)(de)頁面和內容(rong)，間(jian)接地影響(xiang)了網站的(de)(de)轉(zhuan)化(hua)率和用(yong)(yong)戶(hu)的(de)(de)留(liu)存率。

而易(yi)用性良(liang)好的(de)(de)UI界面很大(da)程度上(shang)是從設(she)(she)計優(you)(you)良(liang)的(de)(de)導(dao)(dao)航開始的(de)(de)。導(dao)(dao)航是用戶從A點走向B點的(de)(de)重要(yao)指(zhi)引(yin)，設(she)(she)計師在(zai)(zai)設(she)(she)計過(guo)程中不(bu)僅(jin)要(yao)確(que)保(bao)這個(ge)路標足夠清晰，而且要(yao)讓導(dao)(dao)航的(de)(de)過(guo)程足夠順滑、流(liu)暢。在(zai)(zai)整(zheng)個(ge)設(she)(she)計流(liu)程中，導(dao)(dao)航設(she)(she)計應(ying)該(gai)(gai)占據有一定(ding)的(de)(de)優(you)(you)先級，因(yin)為它不(bu)僅(jin)僅(jin)在(zai)(zai)整(zheng)個(ge)網頁的(de)(de)信息架構中占據著近乎骨架的(de)(de)作(zuo)用，而且在(zai)(zai)整(zheng)個(ge)體驗設(she)(she)計中也扮(ban)演著重要(yao)的(de)(de)角色。在(zai)(zai)原型設(she)(she)計階段(duan)，導(dao)(dao)航的(de)(de)設(she)(she)計應(ying)該(gai)(gai)就(jiu)已經打磨(mo)清晰，并且集中了(le)所(suo)需的(de)(de)設(she)(she)計素材，確(que)保(bao)開發伊始便能搞定(ding)導(dao)(dao)航。

在諸多導航設計(ji)當中(zhong)，有一些優秀的(de)(de)設計(ji)模式(shi)已(yi)經經過反復的(de)(de)設計(ji)驗證，今天的(de)(de)文中(zhong)就挑選出其中(zhong)最突出的(de)(de) 5 種，供你(ni)參(can)考。

1、帶有流暢動效的下拉導航菜單

下代菜(cai)(cai)單(dan)是(shi)UI設(she)計中最常見(jian)(jian)的(de)(de)設(she)計元素，作為(wei)一種擴展性良好的(de)(de)控(kong)件，它在(zai)(zai)(zai)被觸(chu)(chu)發(fa)之后擴展顯(xian)示更(geng)(geng)多(duo)的(de)(de)選(xuan)項，呈現(xian)更(geng)(geng)多(duo)的(de)(de)內容(rong)。下拉菜(cai)(cai)單(dan)有許多(duo)種不同(tong)的(de)(de)衍生樣(yang)式(shi)，在(zai)(zai)(zai)導(dao)航(hang)設(she)計中也很常見(jian)(jian)。許多(duo)傳統的(de)(de)導(dao)航(hang)當(dang)中，導(dao)航(hang)元素的(de)(de)下拉菜(cai)(cai)單(dan)是(shi)需要點擊觸(chu)(chu)發(fa)的(de)(de)，而(er)現(xian)在(zai)(zai)(zai)更(geng)(geng)多(duo)的(de)(de)設(she)計師會(hui)選(xuan)擇光標(biao)懸浮在(zai)(zai)(zai)導(dao)航(hang)元素上的(de)(de)時候(hou)觸(chu)(chu)發(fa)，這樣(yang)對(dui)于(yu)用戶會(hui)更(geng)(geng)加省心(xin)省力(li)。

為了確保導(dao)航的(de)整潔清(qing)晰(xi)，如今網頁的(de)主要導(dao)航類目通常(chang)不會(hui)太多，控制在4~ 6 個(ge)選項(xiang)，而下拉菜單(dan)則用來承載二級導(dao)航元素，這樣就節省了空間(jian)，也讓(rang)信息層級更加清(qing)晰(xi)。

這種設計模式對(dui)于用戶而言并不陌生，瀏覽起來也頗為方便(bian)，對(dui)于多(duo)層(ceng)級、大量選項的(de)導航需求(qiu)而言，它正好可以(yi)應對(dui)。值得(de)注意的(de)是，光(guang)標懸(xuan)浮(fu)觸(chu)發下拉菜單的(de)時候，展現的(de)動效(xiao)要足(zu)夠的(de)微妙，降低用戶打開的(de)突(tu)兀(wu)感，這樣會(hui)讓(rang)體驗更加優秀。

2、漢堡菜單+側邊欄

漢堡菜(cai)(cai)單加上彈出(chu)式的(de)(de)側(ce)(ce)(ce)邊欄在(zai)iOS和 Android 平臺上都是(shi)極為常見(jian)的(de)(de)導(dao)航設計模(mo)式。雖然有數據(ju)表明(ming)，漢堡菜(cai)(cai)單和默認隱(yin)藏(zang)的(de)(de)側(ce)(ce)(ce)邊欄導(dao)航在(zai)打開率上并不如常見(jian)的(de)(de)顯性導(dao)航，但(dan)是(shi)它在(zai)體驗(yan)上有獨特(te)的(de)(de)優勢，讓整個(ge)界(jie)面(mian)更加簡約(yue)、整潔，干(gan)擾性更小(xiao)。用(yong)戶點擊(ji)漢堡菜(cai)(cai)單，側(ce)(ce)(ce)邊欄導(dao)航從(cong)側(ce)(ce)(ce)面(mian)滑出(chu)顯示，用(yong)戶可選(xuan)擇他們(men)想要點擊(ji)的(de)(de)選(xuan)項。

漢堡菜單(dan)和側邊欄的(de)搭配特別適用(yong)(yong)于(yu)響(xiang)應式的(de)網頁設(she)計，例如(ru)Android 平臺的(de) Gmail 官方應用(yong)(yong)，YouTube 和 Facebook，均是沿用(yong)(yong)了這樣的(de)設(she)計。

隱藏式(shi)的側(ce)邊欄導航，在(zai)很(hen)大程度上(shang)讓用戶更(geng)(geng)加(jia)專注(zhu)于主要的界面內(nei)容，讓界面更(geng)(geng)加(jia)整潔。雖然打開(kai)率不(bu)如顯性導航，但是在(zai)很(hen)多情(qing)況下(xia)，這種隱藏性的設(she)計更(geng)(geng)符合(he)實際需求。

3、懸浮固定網頁導航菜單

懸浮(fu)固定(ding)的(de)導(dao)(dao)航(hang)菜單(dan)在越來越多的(de)網頁設計中出(chu)現，當用(yong)戶(hu)在滾(gun)動頁面向下瀏覽的(de)時候，懸浮(fu)固定(ding)導(dao)(dao)航(hang)在頁面頂部(bu)懸浮(fu)不動，隨著用(yong)戶(hu)瀏覽，它們一直都可見，用(yong)戶(hu)無需滾(gun)動到頂部(bu)就可以點擊導(dao)(dao)航(hang)跳轉。

目前，懸(xuan)浮固(gu)定導航(hang)菜(cai)單已(yi)經成為常見的(de)導航(hang)設計(ji)手法，電商、產品類的(de)網(wang)站，多會選擇這(zhe)樣的(de)導航(hang)設計(ji)，便(bian)(bian)于用戶(hu)快速跳(tiao)轉。這(zhe)種導航(hang)設計(ji)的(de)優勢在于快速、便(bian)(bian)捷，用戶(hu)對于在網(wang)站不同的(de)頁面間跳(tiao)轉的(de)需求比較大(da)，那么(me)這(zhe)樣的(de)設計(ji)能(neng)夠省去很(hen)多麻煩。根據 Akamai 和 Gomez.com 的(de)調研(yan)，79%的(de)線上購(gou)物的(de)用戶(hu)，在遭遇糟糕的(de)瀏覽(lan)和導航(hang)體驗之后，會一去不復返，由此可見，便(bian)(bian)捷的(de)導航(hang)是多么(me)重要。

4、深度定制的超大導航菜單

此處我們所說的(de)深度定制(zhi)的(de)超大導(dao)(dao)航(hang)菜單，更接近(jin)選(xuan)項(xiang)卡(ka)的(de)設(she)計(ji)，它們大多分為 2 個層級，不(bu)同(tong)的(de)選(xuan)項(xiang)被組織到不(bu)同(tong)的(de)選(xuan)項(xiang)卡(ka)當中(zhong)，選(xuan)項(xiang)卡(ka)中(zhong)所承載的(de)導(dao)(dao)航(hang)選(xuan)項(xiang)相(xiang)比于下拉(la)菜單更大，設(she)計(ji)也更加視覺化，更易(yi)于點擊選(xuan)取。有的(de)選(xuan)項(xiang)當中(zhong)甚至會包(bao)含文本(ben)和說明，便于用戶進行選(xuan)擇。

這種(zhong)超(chao)大導(dao)航(hang)菜(cai)單當中的子選(xuan)項的尺寸足夠大，視覺化(hua)設計也足夠突出，可(ke)見性極強，用戶很難選(xuan)錯(cuo)。

超大導航(hang)菜單(dan)(dan)所能容納(na)的導航(hang)條(tiao)目相對更多、更加視覺化，和開頭所說(shuo)的下(xia)拉菜單(dan)(dan)導航(hang)類(lei)似，光標懸(xuan)浮在標簽(qian)頁上的時候，自動(dong)顯示下(xia)面的選項(xiang)。根據 NNGroup 的研(yan)究，這類(lei)導航(hang)當中，導航(hang)菜單(dan)(dan)越大，越受歡迎(ying)。

這(zhe)種導航(hang)菜單(dan)適合對(dui)可(ke)訪問(wen)性要求高的(de)(de)網(wang)頁(ye)，對(dui)于有視(shi)力障礙和進(jin)階用戶都更(geng)為(wei)友好。另外一方面，這(zhe)種導航(hang)還為(wei)設計(ji)師提(ti)供了更(geng)多發揮的(de)(de)空間。

5、響應式卡片柵格導航

響(xiang)應式(shi)的設計就不必贅述(shu)，但(dan)是(shi)卡(ka)片(pian)柵(zha)格(ge)(ge)式(shi)的導(dao)(dao)航(hang)(hang)無疑是(shi)從移(yi)動端開(kai)始流行(xing)(xing)的導(dao)(dao)航(hang)(hang)模式(shi)。在(zai)這(zhe)里，導(dao)(dao)航(hang)(hang)選項(xiang)被設計成為小(xiao)(xiao)卡(ka)片(pian)，置于(yu)導(dao)(dao)航(hang)(hang)欄的柵(zha)格(ge)(ge)當(dang)中，當(dang)屏幕(mu)尺寸發生(sheng)改變的時候，導(dao)(dao)航(hang)(hang)中的小(xiao)(xiao)卡(ka)片(pian)會隨著自適(shi)應的柵(zha)格(ge)(ge)而重新排列，以(yi)匹配整個(ge)布局。這(zhe)種設計不僅高度(du)可視化，而且可以(yi)根據主(zhu)題風格(ge)(ge)，進行(xing)(xing)深度(du)的定制。

這種導航當中，各個選(xuan)項不僅便(bian)于光標點擊(ji)，而且(qie)在移動端上，更加適合手(shou)指點擊(ji)，可以說(shuo)是跨平(ping)臺響應式設計(ji)的(de)首選(xuan)。許多網站目前都采(cai)用了(le)這樣的(de)導航設計(ji)，比如 Pinterest 和著(zhu)名的(de)音樂服務 Spotify。